<template>
  <div class="content f-c">
    <el-form inline>
      <el-form-item label="地区">
        <el-input v-model="searchParams.search" clearable placeholder="" />
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" style="margin-left: 15px" @click="onSearch">搜索</el-button>
      </el-form-item>
      <el-form-item />
    </el-form>
    <div class="line" />
    <div class="button-list2 f-r a-c" style="margin-bottom: 20px">
      <el-button plain type="primary" @click="onAdd">添加</el-button>
    </div>
    <div class="table-box">
      <el-table
        v-loading="loading"
        height="100%"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="index" align="center" label="序号" />
        <el-table-column prop="address" label="地区" align="center" />
        <el-table-column prop="name" label="年份" align="center" />
        <el-table-column prop="updateTime" label="更新日期" align="center" />
        <el-table-column prop="statusName" label="状态" align="center" />
        <el-table-column label="操作" fixed="right" width="180px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="onEdit(scope.row)"
            >编辑 </el-button>
            <el-button
              v-if="scope.row.status == 0"
              type="text"
              @click="onUpdateStatus(scope.row, '1')"
            >停用</el-button>
            <el-button
              v-if="scope.row.status == 1"
              type="text"
              @click="onUpdateStatus(scope.row, '0')"
            >启用</el-button>
            <el-button
              type="text"
              @click="onUpdateStatus(scope.row, null)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
    <el-drawer
      title="添加/编辑"
      :visible.sync="drawer"
      direction="rtl"
      size="456px"
    >
      <div class="drawer-content">
        <el-form ref="formRef" :rules="rules" :model="ruleForm" label-position="top">
          <el-form-item prop="cropName" label="作物">
            <el-select v-model="ruleForm.cropName" clearable placeholder="">
              <el-option v-for="item in options" :value="item.typeName" :label="item.typeName" />
            </el-select>
          </el-form-item>
          <el-form-item prop="pointId" label="样点">
            <el-select v-model="ruleForm.pointId" clearable placeholder="">
              <el-option v-for="item in options2" :value="item.id" :label="item.pointName" />
            </el-select>
          </el-form-item>
          <el-form-item label="管理单位">
            <div class="f-r f-w tag-list">
              <div
                v-for="(item,index) in ruleForm.fertilizeYieldList"
                :key="index"
                :class="[index === currentIndex1 ? 'active' : '', 'tag f-r j-b a-c']"
                @click="activeUnit(item,index)"
              >
                <span>{{ item.yield }} {{ index + 1 }}</span>
                <i class="el-icon-close" @click="removeYield(index)" />
              </div>
              <div class="tag" style="text-align: center" @click="addYield">添加</div>
            </div>
          </el-form-item>
          <el-tabs v-model="currentIndex2">
            <el-tab-pane v-for="(item,index) in ruleForm.fertilizeYieldList[currentIndex1].fertilizePlanList" :key="index" :label="item.yield + (index + 1)" :name="index + ''">
              <el-form-item label="N">
                <el-input v-model="item.N" clearable />
              </el-form-item>
              <el-form-item label="P">
                <el-input v-model="item.P" clearable />
              </el-form-item>
              <el-form-item label="K">
                <el-input v-model="item.K" clearable />
              </el-form-item>

              <div v-for="(cardItem, cardIndex) in item.fertilizeCardList" :key="cardIndex" class="form-box2">
                <div class="form-box-top f-r a-c">
                  <div class="f-1 f-r a-c" style="margin-right: 10px">
                    <div style="width: 30px">{{ cardIndex + 1 }}. </div> <el-input v-model="cardItem.name" clearable />
                  </div>
                  <div class="f-1">用量</div>
                </div>
                <div class="form-box-body">
                  <div v-for="(recordItem,recordIndex) in cardItem.fertilizeCardRecordList" :key="recordIndex" class="f-r a-c" style="margin-bottom: 10px">
                    <div class="f-1 f-r a-c">
                      <div style="width: 30px" />
                      <el-input v-model="recordItem.name" clearable />
                    </div>
                    <div class="f-1 f-r a-c" style="margin-left: 10px">
                      <el-input v-model="recordItem.amount" clearable />
                      <i class="el-icon-delete" style="margin-left: 10px" @click.prevent="cardItem.fertilizeCardRecordList.splice(recordIndex,1)" />
                    </div>
                  </div>
                  <div class="add-btn" @click="cardItem.fertilizeCardRecordList.push({ name: '', amount: '' })">+ 添加</div>
                </div>
              </div>

              <div class="f-r a-c j-c">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="item.fertilizeCardList.push({
                    name: '底肥',
                    fertilizeCardRecordList: [
                      {
                        name: '',
                        amount: ''
                      }
                    ]
                  })"
                >添加</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form>
        <span slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="drawer = false">取 消</el-button>
          <el-button type="primary" @click="onSave">提 交</el-button>
        </span>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import crud from '@/mixins/crud';
import { http_fertilize_plan, http_land, http_pest } from '@/api';

export default {
  name: 'Index',
  mixins: [crud],
  data() {
    return {
      request: http_fertilize_plan,
      activeName: '0',
      tableHeight: window.innerHeight - 350,
      drawer: false,
      options: [

      ],
      options2: [],
      options3: [
        { id: 1, name: '产量1', active: false },
        { id: 1, name: '产量2', active: false },
        { id: 1, name: '产量3', active: false }
      ],
      ruleForm: {
        id: undefined,
        cropName: '',
        pointId: '',
        status: '',
        fertilizeYieldList: [
          {
            yield: '产量',
            fertilizePlanList: [
              {
                yield: '施肥方案',
                N: '',
                P: '',
                K: '',
                fertilizeCardList: [
                  {
                    name: '底肥',
                    fertilizeCardRecordList: [
                      {
                        name: '',
                        amount: ''
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      currentIndex1: 0,
      currentIndex2: '0'
    }
  },
  created() {
    http_pest.cropList().then(res => {
      this.options = res.data
    })
    http_land.page().then(res => {
      this.options2 = res.rows
    })
  },
  methods: {
    activeUnit(item, index) {
      this.currentIndex1 = index
    },
    formatTableData(data) {
      data.forEach(el => {
        if (el.status == 0) {
          el.statusName = '正常'
        } else if (el.status == 1) {
          el.statusName = '停用'
        }
      })
    },
    onUpdateStatus(item, value) {
      this.request.deleteOne({
        id: item.id,
        status: value
      }).then(res => {
        this.$message.success(res.msg)
        this.onSearch()
      })
    },
    onAdd() {
      this.ruleForm = {
        id: undefined,
        cropName: '',
        pointId: '',
        status: '',
        fertilizeYieldList: [
          {
            yield: '产量',
            fertilizePlanList: [
              {
                yield: '施肥方案',
                N: '',
                P: '',
                K: '',
                fertilizeCardList: [
                  {
                    name: '底肥',
                    fertilizeCardRecordList: [
                      {
                        name: '',
                        amount: ''
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
      this.drawer = true
    },
    onEdit(row) {
      this.request.read(row.id).then(res => {
        for (const ruleFormKey in this.ruleForm) {
          this.ruleForm[ruleFormKey] = res.data[ruleFormKey]
        }
      })
      this.drawer = true
    },
    onSave() {
      console.log(this.ruleForm)
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.request.create(this.ruleForm).then(res => {
            this.$message.success(res.msg)
            this.onClose()
            this.onSearch()
          })
        }
      })
    },
    onClose() {
      this.drawer = false
    },
    removeYield(index) {
      if (index === 0) return
      this.ruleForm.fertilizeYieldList.splice(index, 1)
      this.currentIndex1 = 0
    },
    addYield() {
      this.ruleForm.fertilizeYieldList.push({
        yield: '产量',
        fertilizePlanList: [
          {
            yield: '施肥方案',
            N: '',
            P: '',
            K: '',
            fertilizeCardList: [
              {
                name: '底肥',
                fertilizeCardRecordList: [
                  {
                    name: '',
                    amount: ''
                  }
                ]
              }
            ]
          }
        ]
      }
      )
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  height: 100%;
}
.form-box2 {
  margin-bottom: 20px;
  width: 100%;
  background: #FAFAFA;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #DCDFE6;
  font-size: 14px;
  .form-box-top {
    border-bottom: 1px solid #DCDFE6;
    padding:10px;
  }
  .form-box-body {
    padding: 10px;
    font-size: 14px;
    .add-btn {
      text-align: center;
      color: #1AAD19;
      margin-top: 16px;
      cursor: pointer;
    }
  }
}

.tag-list {
  .tag {
    height: 33px;
    border-radius: 2px;
    opacity: 1;
    border: 1px solid #ABE0AE;
    padding: 0 10px;
    margin-right: 10px;
    margin-top: 10px;
    line-height: 33px;
    color: #1AAD23;
    cursor: pointer;
    i {
      cursor: pointer;
    }
  }
  .tag.active {
    background: #1AAD23;
    color: #ffffff;
  }
}
</style>
